<template>
<!-- 列表 -->
  <div class="table">
    <el-table
      :data="tableData"
      :border="border"
      style="width: 100%"
      v-loading="loading"
      :highlight-current-row="clickRow"
      @current-change="handleCurrentChange"
    >
    <slot></slot>
    </el-table>
    <!-- 分页组件 -->
    <BasePagination v-if="page" :page="page" @pageChange="pageChange"></BasePagination>
  </div>
</template>

<script>
export default {
  name: "BaseTable",
  props: {
    tableData: {
      type: Array,
      required: true,
      default: function() {
        return [];
      }
    },
    loading: {
      type: Boolean,
      required: true,
      default: false
    },
    page: {
      type: Object,
      default: function() {
        return {};
      }
    },
    clickRow: {
      type: Boolean,
      default: function() {
        return false;
      }
    },
    border: {
      type: Boolean,
      default: true
    }
  },
  components:{
    BasePagination: () => import("@/components/BasePagination")
  },
  methods: {
    pageChange(params) {
      this.$emit("pageChange", params);
    },
    handleCurrentChange(val) {
      this.$emit("clickRow", val);
    }
  },
};
</script>

<style scoped lang="scss">
.table{
  margin-top: 15px;
}
</style>